<style rel="stylesheet/scss" lang="scss" scoped>
.card_wrap{
        display: flex;
        flex-wrap: wrap;
        .box_card_imgs{
            display: flex;
            justify-content: center;
            width: 170px;
            margin: 10px;

            .imgs_check{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 5px;
                height: 32px;
                margin-top: 10px;
                .radio_box{
                    .wrap{
                        display: flex;
                        .r{
                            display: flex;
                            align-items: center;
                            height: 30px;
                            margin-right: 5px;
                        }
                        .t{
                            display: flex;
                        }
                    }
                }
            }
        }
    }
</style>

<template>
    <div>
        <!-- 窗口 -->
        <el-dialog title="商品图集" :visible.sync="visibleSkuImages" :close-on-click-modal="false" @close="handleSkuImagesDialogClose">
            
            <el-row>
                <el-col :span="24">
                    <label style="display:block;float:left">选择图集 或</label>
                    <MultiUpload
                        style="float:left;margin-left:10px;"
                        :showFile="false"
                        :listType="'text'"
                        v-model="uploadImages"
                    ></MultiUpload>
                </el-col>
                <el-col :span="24">
                    <el-divider></el-divider>
                </el-col>
                <el-col :span="24">
                    <div class="card_wrap">
                        <el-card
                            class="box_card_imgs"
                            v-for="(img, index) in images"
                            :key="index">
                                <el-image
                                style="width:160px;height:120px"
                                :src="img"
                                :preview-src-list="images"
                                fit="fill"></el-image>
                            <div class="imgs_check">
                                <div class="chk_box">
                                    <el-checkbox
                                        v-model="spu.imgObj[index].imgUrl"
                                        :true-label="img"
                                        false-label></el-checkbox>
                                </div>
                                <div class="radio_box">
                                    <el-tag v-if="spu.imgObj[index].defaultImg == 1">
                                        <div class="wrap">
                                            <div class="r">
                                                <input
                                                type="radio"
                                                checked
                                                :name="skuId"
                                                @change="checkDefaultImg(spu.imgObj,index,img)"/>
                                            </div>
                                            <div class="t">设为默认</div>
                                        </div>
                                    </el-tag>
                                    <el-tag v-else>
                                        <div class="wrap">
                                            <div class="r">
                                                <input
                                                type="radio"
                                                :name="skuId"
                                                @change="checkDefaultImg(spu.imgObj,index,img)"/>
                                            </div>
                                            <div class="t">设为默认</div>
                                        </div>
                                    </el-tag>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-col>

            </el-row>

            <div slot="footer" class="dialog-footer">
                <el-button @click="visibleSkuImages = false">取 消</el-button>
                <el-button @click="handleSubmit" type="primary" :loading="submitLoading">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import MultiUpload from "@/views/components/upload/multi-upload";
export default {
    components: {
        MultiUpload
    },
    data() {
        return {
            submitLoading: false,
            visibleSkuImages: false,
            skuId: null,
            images: [],
            spu: {
                imgObj: {}
            },
            uploadImages: [],

            curImages: []
        }
    },
    
    mounted() {
    	this.$nextTick(function () {
    	})
    },
    watch: {
        /**
         * 将新上传的图片合并到现有图集
         */
        uploadImages(val) {
            let imgArr = Array.from(new Set(this.images.concat(val)));

            let len = imgArr.length - this.spu.imgObj.length;
            if (len > 0) {
                let imgs = new Array(len);
                imgs = imgs.fill({ imgUrl: "", defaultImg: 0 });
                this.spu.imgObj = this.spu.imgObj.concat(imgs);
            }

            this.images = imgArr;
        }
    },
    methods: {
		init(spuId, skuId) {
            this.spuId = spuId
            this.skuId = skuId
            this.visibleSkuImages = true
            if (this.skuId) {
                this.getSkuImages()
            }
        },

        /**
         * 获取当前SKU图集
         */
        getSkuImages() {
            this.$http({
                url: '/product/pmsskuimages/list',
                methods: 'get',
                params: {skuId: this.skuId}
            }).then(res => {
                if (this.ResultMessage(res, false)) {
                    this.curImages = res.data || []
                    this.getSpuImages()
                }
            }).catch(error => {
                this.$notify({ title: '错误', message: error, type: 'error' });
            })
        },

        /**
         * 获取SPU图集
         */
        getSpuImages() {
            this.$http({
                url: '/product/pmsspuimages/list',
                methods: 'get',
                params: {spuId: this.spuId}
            }).then(res => {
                if (this.ResultMessage(res, false)) {
                    let imgs = [];
                    res.data.forEach(item => {
                        this.images.push(item.imgUrl)
                        let cur = this.curImages.filter((curItem, index) => {
                            return item.imgUrl === curItem.imgUrl
                        })
                        if(cur && cur.length > 0) {
                            imgs.push({ imgUrl: cur[0].imgUrl, defaultImg: cur[0].defaultImg });
                        } else {
                            imgs.push({ imgUrl: "", defaultImg: 0 });
                        }
                    })
                    this.spu.imgObj = imgs
                }
            }).catch(error => {
                this.$notify({ title: '错误', message: error, type: 'error' });
            })
        },

        /**
         * SKU默认图片
         */
        checkDefaultImg(imgObj, index, img) {
            //这个图片被选中了
            imgObj[index].imgUrl = img; //默认选中
            imgObj[index].defaultImg = 1; //修改标志位;
            //修改其他人的标志位
            imgObj.forEach((item, idx) => {
                if (idx != index) {
                    imgObj[idx].defaultImg = 0;
                }
            });
        },

        /**
         * 提交
         */
        handleSubmit() {
            this.$confirm("修改商品图集信息, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => {
                this.$http({
                    url: `/product/pmsskuimages/update/${this.spuId}/${this.skuId}`,
                    method: "post",
                    data: this.spu.imgObj
                }).then(res => {
                    this.visibleSkuImages = false
                    this.$message({ type: "success", message: "修改成功!" });
                    this.$emit("refreshData");
                });
            }) .catch((e) => {
                this.$message({ type: "info", message: "已取消修改" + e });
            });
        },
        
        handleSkuImagesDialogClose() {
            this.clearData();
        },

        clearData(){
            this.images = [];
            this.spu.imgObj = {};
            this.uploadImages = [];
            this.curImages = [];
        }
		
    }
}
</script>